<template>
  <view class="login-container">
    <view class="logo-card">
      <image class="logo" src="/static/logo192.png"></image>
      <view>
        <text class="title">兰迪移动端登录</text>
      </view>
    </view>

    <view class="form-card">
      <uni-forms ref="valiForm" :modelValue="model" :rules="rules">
        <uni-forms-item name="userName">
          <uni-easyinput type="text" prefixIcon="person" v-model="model.userName" placeholder="请输入账号" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <uni-easyinput
            type="password"
            prefixIcon="locked"
            v-model="model.password"
            :clearable="false"
            placeholder="请输入密码"
          />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="handleLogin('valiForm')">登录</button>
    </view>

    <view class="font-card"></view>
  </view>
</template>

<script>
import { getSaltInfo, login } from "@/api/current/index";
import { crypto } from "@/utils";
import { token } from "@/utils";

export default {
  data() {
    return {
      model: {
        userName: "admin",
        password: "randi",
      },
      rules: {
        userName: {
          rules: [{ required: true, errorMessage: "请输入账号" }],
        },
        password: {
          rules: [{ required: true, errorMessage: "请输入密码" }],
        },
      },
    };
  },
  mounted() {},
  methods: {
    async handleLogin(refName) {
      const values = await this.$refs[refName].validate();
      this.$message.loading("登录中...", 0);
      const { salt, uuid } = await getSaltInfo();
      values.password = crypto.encrypt(values.password, salt);
      values.uuid = uuid;
      const { accessToken, refreshToken } = await login(values);
      token.setToken(accessToken, refreshToken);
      this.$store.dispatch("GetInfo");
      this.$tab.reLaunch("/pages/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  .logo-card {
    width: 100%;
    height: auto;
    padding: 124rpx 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .logo {
      width: 48rpx;
      height: 48rpx;
    }
    .title {
      padding: 0px 16rpx;
      font-size: 21px;
      box-sizing: border-box;
    }
  }

  .form-card {
    width: 100%;
    padding: 0px 78rpx;
    box-sizing: border-box;
  }
}
</style>
